<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" charset="UTF-8"  content="width=device-width, initial-scale=1">
    <title>公告消息</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/jedate.css">
    <link rel="stylesheet" href="../css/index.css" type="text/css">
    <style>
        .selTime{
            display: inline-block;
            width: 178px;
            height: 34px;
        }
        .straTime{
            display: inline-block;
            width: 178px;
            height: 34px;
        }
        .box-title {
            font-size: 24px;
            color: #444;
            display: block;
            padding: 10px;
            text-align: center;
            border: 1px solid #ddd;
        }
    </style>

</head>
<body>
<div class="container-fluid">
    <div class="productMain">
        <div class="panel panel-default">
            <div class="panel-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-md-1 control-label">公告标题</label>
                        <div class="col-md-2" style="text-align: left">
                            <input type="text" v-model="title" id="title" class="form-control " style="font-size: 12px!important;height: 30px!important;"  placeholder="请输入关键字搜索">
                        </div>

                        <label class="col-md-1 control-label form-inline">创建时间</label>
                        <div>
                            <input class="form-control straTime" v-model="startTime" id="selStartTime" style="cursor:pointer!important;background-color: white!important;font-size: 12px!important;height: 30px!important;"  type="text" readonly="true"  placeholder="请选择开始时间">
                            至
                            <input class="form-control selTime" v-model="endTime" id="selEndTime"style="cursor:pointer!important;background-color: white!important;font-size: 12px!important;height: 30px!important;"   type="text" readonly="true"  placeholder="请选择结束时间" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-1 control-label">公告类型</label>
                        <div class="col-md-2">
                            <select class="form-control" v-model="type" id="type" style="font-size: 12px!important;height: 30px!important;">
                                <option value="">全部</option>
                                <option value="1">系统公告</option>
                                <option value="2">跑马灯公告</option>
                            </select>
                        </div>

                        <label class="col-md-1 control-label">创建者</label>
                        <div class="col-md-2" style="text-align: left">
                            <input type="text" v-model="operator" id="operator" class="form-control " style="font-size: 12px!important;height: 30px!important;"  placeholder="请输入姓名">
                        </div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-primary pull-right" style="font-size: 14px!important;height: 30px!important;line-height: 0px;!important;border-color:#576b95;background-color: #576b95;"  id="search-form" @click="turnPage(1)">搜索</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--添加公告弹框-->
        <div class="form-group">
            <div class="col-md5">
                <a href="add.html"><button type="button" class="btn btn-success" style="background-color: #c4d703;border-color: #c4d703;" data-toggle="modal" data-target="#myModal" >添加</button></a>
            </div>
        </div>
        <table class="table table-hover table-bordered text-center">
            <thead>
            <tr>
                <span class="box-title">当前检索条件共有{{totalNum}}条数据</span>
                <th style="width: 29px;" class="text-center">序号</th>
                <th class="text-center">类型</th>
                <th class="text-center">标题</th>
                <th class="text-center">内容</th>
                <th class="text-center">创建时间</th>
                <th class="text-center">开始时间</th>
                <th class="text-center">结束时间</th>

               <!-- <th class="text-center">总数量</th>
                <th class="text-center">发送成功</th>
                <th class="text-center">状态</th>-->
                <th class="text-center">创建者</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="notice in noticetableList" v-if="noticetableList.length>0">
                <td style="vertical-align: middle;" v-text="$index+1"></td>
                <td style="vertical-align: middle;" v-text="notice.type |typeFilter"></td>
                <td style="vertical-align: middle;" v-text="notice.title"></td>
                <td style="vertical-align: middle;text-align: left;"title="{{notice.content}}">
                    <span v-if="notice.content.length>30" v-text="notice.content.substring(0,30)+'...'"></span>
                    <span v-if="notice.content.length<=30" v-text="notice.content"></span>
                </td>
                <td style="vertical-align: middle;" v-text="notice.createTime"></td>
                <td style="vertical-align: middle;" v-text="notice.startTime"></td>
                <td style="vertical-align: middle;" v-text="notice.endTime"></td>
                 <td style="vertical-align: middle;" v-text="notice.operator"></td>
                <td>
                    <a v-bind:href="notice.id | operateFilter 'query'" style="background-color: #576b95;border-color: #576b95;" class="btn btn-info btn-xs productDetail">查看</a>
                    <a v-bind:href="notice.id| operateFilter 'edit'" class="btn btn-primary btn-xs edit" style="background-color: #c4d703;border-color: #c4d703;">编辑</a>

                </td>
            </tr>
            <tr id="tab">

            </tr>
            </tbody>
        </table>
        <div class="footer-nav" v-if="noticetableList.length>0">
            <ul class="pagination">
                <li><a style="color: #428bca;" class="disableHref">总条数:{{totalNum}}</a></li>
            </ul>
            <ul class="pagination">
                <li v-if="curIndex!=1"><a href="javascript:;"   @click="turnPage(1)" >首页</a></li>
                <li v-if="curIndex!=1"><a href="javascript:;" @click="prevPage">上一页</a></li>
                <li v-for="pageIndex in pageList" v-bind:class="{'active':curIndex==parseInt(pageIndex+curNum)}"><a href="javascript:;" @click="turnPage(pageIndex+curNum)" v-text="pageIndex+curNum"></a></li>
                <li v-if="curIndex!=totalPage"><a href="javascript:;" @click="nextPage">下一页</a></li>
                <li v-if="curIndex!=totalPage"><a href="javascript:;" @click="turnPage(totalPage)">末页</a></li>
            </ul>
        </div>
    </div>
</div>
<!--删除按钮-->
<div class="modal fade" id="celDelivery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" style="text-align: center">提示</h4>
            </div>
            <div class="modal-body">
                <p style="font-size: 14px; text-align: left;">
                    确定删除以下公告消息：<span>{{celConfirmnotice.content}}</span><br/>
                </p>
                <input type="hidden" id="largeareacode">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"  data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary"  data-dismiss="modal" @click="templDelete()">确定</button>
            </div>
        </div>
    </div>
</div>
<!--发送中不能删除判断-->
<div class="modal fade" id="celxiaoxi" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p style="font-size: 14px; text-align: left;">消息正在发送中,不能删除。</p>
            </div>
            <div class="modal-footer">
                <!--<button type="button" class="btn btn-default"  data-dismiss="modal">取消</button>-->
                <button type="button" class="btn btn-primary"  data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
<script src="../js/lib/jquery.min.js?v=20170422"></script>
<script src="../js/lib/bootstrap.min.js?v=20170422"></script>
<script src="../js/jeDate/jquery.jedate.min.js?v=20170422"></script>
<script src="../js/lib/vue.min.js?v=20170422"></script>
<script src="../js/lib/ajaxFileUpload.js?v=20170422"></script>
<script src="../js/lib/jquery.cookie.js?v=20170422"></script>
<script src="../js/lib/jquery.form.js?v=20170422"></script>
<script src="../js/main.js?v=20170422"></script>
<script src="../js/common.js?v=20170422"></script>
<script>
    $(function() {
        var userId = $.cookie('userId');
        var pag=$.getUrlParam('pag');
        if( pag == null || pag==undefined || pag==""){
            pag=1;
        }
        //浏览器带搜索参数
        var title = $.getUrlParam('title');
        if( title == null || title==undefined || title==""){
            title=$("#title").val() || "";
        }
        var type = $.getUrlParam('type');
        if( type == null || type==undefined || type==""){
            type=$("#type").val() || "";
        }
        var startTime = $.getUrlParam('startTime');
        if( startTime == null || startTime==undefined || startTime==""){
            startTime=$("#selStartTime").val() || "";
        }
        var endTime = $.getUrlParam('endTime');
        if( endTime == null || endTime==undefined || endTime==""){
            endTime=$("#selEndTime").val() || "";
        }
        var operator = $.getUrlParam('operator');
        if( operator == null || operator==undefined || operator==""){
            operator=$("#operator").val() || "";
        }
        //日期显示
        var start = {
            format: 'YYYY-MM-DD hh:mm:ss',
            hmsSetVal:{hh:00,mm:00,ss:00},
            isinitVal:false,
            ishmsVal:false,
            maxDate: '2099-06-30 23:59:59', //最大日期
            choosefun: function(elem,datas){
                end.minDate = datas; //开始日选好后，重置结束日的最小日期
            }
        };
        var end = {
            format: 'YYYY-MM-DD hh:mm:ss',
            hmsSetVal:{hh:23,mm:59,ss:59},
            isinitVal:false,
            ishmsVal:false,
            maxDate: '2099-06-16 23:59:59', //最大日期
            choosefun: function(elem,datas){
                start.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
            }
        };
        $('#selStartTime').jeDate(start);
        $('#selEndTime').jeDate(end);


        window.vm = new Vue({
            el:"body",//指的是,Vue需要监听的范围,这个地方写body是为了监听整个页面,也可以控制某一块区域
            data:{
                "noticetableList":[],//列表数据list
                "pageList":11,
                "title":title,
                "type":type,
                "startTime":startTime,
                "endTime":endTime,
                "operator": operator,
                "celConfirmnotice":{
                    "id":"",
                    "content":""
                },
                "curNum":1,
                "curIndex":pag,
                "totalPage":0,
                "totalNum":0,
                "total":"",
                "page": "1",//当前第几页
                "limit": "20"//每页多少条
//                "deliveryModel":"",//判断发货状态取不取消
            },
            ready:function () {
                this.getnoticeVOList(pag);//初始化,第一次进来查询商品列表
            },
            filters: {
                typeFilter: function (value) {
                    switch(value){
                        case "1":
                            return "系统公告";
                        case "2":
                            return "跑马灯公告";
                    }
                },
                operateFilter:function (id,flag) {
                    if(flag=="query"){
                        return   'add.html?enable=false&noticetableId=' + id;
                    }else if(flag=="edit"){
                        return  'add.html?noticetableId=' + id;
                    }
                }
            },
            methods:{
                pageInit:function (pageNum) {
                    if(pageNum==1 || 9+pageNum-5<this.totalPage || this.totalPage<=11){
                        if(this.totalPage<=11){
                            this.curNum = 1;
                        }else if(pageNum-5>0){
                            this.curNum = pageNum-5;
                        }
                    }else if(pageNum>1){
                        if(pageNum-5>0){
                            this.curNum = this.totalPage-10;
                        }
                    }
                    this.curIndex = parseInt(pageNum);
                },
                setPage:function (totalNum) {
                    //根据一页10条,计算一共有多少页
                    this.totalPage = Math.ceil(totalNum/20);
                    if(this.totalPage<12){
                        //如果不满11页,那么保存当前的总页数,比如可能只有5页,那么totalPage=5
                        this.pageList = this.totalPage;
                    }else{
                        this.pageList = 11;//默认最多显示11页
                    }
                },
                //点击删除按钮,给后台传值过去,然后返回后删除成功
                edit:function () {
                    var _this = this;
                    var id =this.celConfirmnotice.id;
//                    alert(id);
                    $.ajax({
                        url: majiangurl+"notice/editStatus",
                        type:"post",
                        xhrFields: {
                            withCredentials: true
                        },
                        crossDomain: true,
                        dataType: "json",
                        data:{
                            "str" : JSON.stringify({"id":id})
                        },
                        success: function (res) {
                            if(res.status=="200"){
                                common.lightBox.showMessage("删除成功!");
                                _this.totalNum = _this.totalNum-1;
                                _this.getnoticeVOList(1);


                            }else {
                                common.lightBox.showMessage(res.message);
                            }
                        }
                    });
                },
                cancelOrder:function (notice) {
                    //alert(id);
                    this.celConfirmnotice.id = notice.id;
                    this.celConfirmnotice.content = notice.content;

                    var status =  notice.status;
                    if(status==110){
                        $("#celxiaoxi").modal('show');
                    }else{
                        $("#celDelivery").modal('show');
                    }
                },
                //查询商品列表
                getnoticeVOList: function (pageNum) {
                    $('.footer-nav').show();
                    var _this = this;
                    _this.noticetableList = [];
                    common.lightBox.showLoading();

                    //接口请求
                    $.postRequest(majiangurl+"noticetable/searchNoticetableList",{
                        "str" : JSON.stringify({
                            "title":this.title,
                            "startTime":$("#selStartTime").val(),
                            "endTime":$("#selEndTime").val(),
                            "type":this.type,
                            "page": pageNum,
                            "limit": "20"
                        })
                    },function (res) {
                        console.log(res)
                        common.lightBox.hideLoading();
                        if (res.status =='200' && res.result.noticetableList.length != 0) {
                            //把接口返回的值保存到userList中
                            _this.noticetableList = res.result.noticetableList;
                            _this.setPage(res.result.count);
                            _this.totalNum = res.result.count;
                            _this.pageInit(pageNum);
                            $("#tab").empty()
                        }else{
                            _this.totalNum=0;
                            _this.noticetableList = [];
                            $("#tab").html('<td style="font-size: 20px;font-family:Helvetica Neue, Helvetica, Arial, sans-serif;"colspan="16">没有数据</td>')
//                            common.lightBox.showMessage("查询失败.");
                        }
                    });
                },
                prevPage:function () {
                    if(this.curIndex==1){
                        return;
                    }
//                this.searchUser(this.curIndex-1);
                    this.turnPage(this.curIndex-1);
                },
                nextPage:function () {
                    if(this.curIndex==this.totalPage){
                        return;
                    }
//                this.searchUser(this.curIndex+1);
                    this.turnPage(this.curIndex+1);
                },
                turnPage:function(pageNo){
                    //this.pageInit(pageNo);
                    window.location.href  = window.location.pathname +"?pag="+pageNo+"&title="+this.title+"&type="+this.type+"&startTime="+$("#selStartTime").val()+"&endTime="+$("#selEndTime").val()+"&operator="+this.operator;
                    $("#title").val("");
                    $("#type").val("");
                    $("#status").val("");
                    $("#operator").val("");
                    $("#selStartTime").val("");
                    $("#selEndTime").val("");
                }

            }
        })
    })
</script>
</body>
</html>